<template>
  <div>
    <el-table :data="tableData" style="width: 100%;">
      <el-table-column type="index" width="50" />
      <el-table-column prop="_id" label="唯一主键" />
      <el-table-column prop="title" label="图书名" />
      <el-table-column prop="description" label="图书说明" />
      <el-table-column prop="createdAt" label="创建时间" />
      <el-table-column prop="updatedAt" label="更新时间" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            type="primary"
            size="small"
            @click="handleEdit(scope.row)"
            v-text="'Edit'" />
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.row)"
            v-text="'Delete'" />
        </template>
      </el-table-column>
    </el-table>
    <el-pagination 
      style="margin: 20px;float: right;"
      v-model:current-page="page.pageNum"
      v-model:page-size="page.pageSize"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, pre, pager, next, jumper"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { getBookList, deleteBookById } from '../../api/index'
import { Book } from '../../api/type'
import { useRouter } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'
// 获取路由实例
const $router = useRouter()

const page = reactive({
  pageNum: 1,
  pageSize: 10
})
const total = ref<number>(0)
const tableData = ref<Array<Book>>([])

// 请求图书列表方法
const getTableData = () => {
  // 请求图书列表接口
  getBookList(page.pageSize, page.pageNum).then((res) => {
    // 将请求好的数据放到提前准备好的列表里
    tableData.value = res.rows
    // 图书总量
    total.value = res.total
  })
}
// 编辑按钮
const handleEdit = (row: Book) => {
  // 点击编辑跳转理由，并携带 _id
  $router.push({
    // 路由地址
    path: '/createBook',
    // 携带参数
    query: {
        _id: row._id
      }
  })
}
// 删除按钮
const handleDelete = (row: Book) => {
  /**
   *  element-plus 提示框
   * 参数1：提示内容
   * 参数2：提示标题
   * 参数3：配置对象，其中包含点击按钮，提示框类型，class等
   * */ 
  ElMessageBox.confirm(
    '删除后无法恢复，请确认！',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
    // 提示框点击确定触发
  ).then(() => {
    // 删除接口，携带当前点击的列表实例 _id 
    deleteBookById(row._id).then((res: any) => {
      // 接口成功后触发
      ElMessage.success(res.message)
      // 刷新数据
      getTableData()
    }).catch(() => {
      // 接口失败时触发
      ElMessage.error('失败！')
      getTableData()
    })
  }).catch(() => {
      ElMessage.error('失败！')
      getTableData()
    })
}
// 分页 当页码有变化时触发
const handleCurrentChange = (val: number) => {
  // 回调 val 是页码值
  page.pageNum = val
  getTableData()
}
// 分页 修改当前页显示数据数量时触发
const handleSizeChange = (val: number) => {
  // 回调 val 是每页数据值
  page.pageSize = val
  getTableData()
}

getTableData()
</script>
<style lang="">
  
</style>